<template>
	<div
		class="videoPanel"
		ref="videoPanel"
	>
		<el-tabs v-model="activeName">
			<el-tab-pane
				label="实时监控"
				name="1"
			></el-tab-pane>
			<el-tab-pane
				label="监控视频"
				name="2"
			></el-tab-pane>
		</el-tabs>
		<div
			class="tab-content"
			:style="style"
		>
			<cameraControl
				:height="height"
				v-on="$listeners"
				v-show="activeName==='1'"
			></cameraControl>
			<videoTable
				:height="height"
				v-on="$listeners"
				v-show="activeName==='2'"
				type="2"
			></videoTable>
		</div>
	</div>
</template>

<script>
	import videoTable from "./videoTable";
	import cameraControl from "./cameraControl";
	export default {
		name: "videoPanel",
		components: { cameraControl, videoTable },
		props: {},
		data() {
			return {
				activeName: "1",
				height: 0
			};
		},
		watch: {
			activeName(v) {
			  if(v=='1'){
			    this.$parent.$parent.initEZUIKit();
        }
			}
		},
		computed: {
			style() {
				return `height:${this.height}px`;
			}
		},
		methods: {
			async getData() {
				let id = this.route.params.id;
				if (!id) return;
				this.loading = true;
				this.list = await Api.OrderDetail.accessory({
					data: {
						correlationId
					}
				}).catch((error)=> {
                	console.log(error);
              	});
				this.loading = false;
			},
			setHeight() {
				this.height = this.$refs.videoPanel.offsetHeight - 40;
			}
		},
		created() {
			//this.getData()
		},
		mounted() {
			this.setHeight();
		}
	};
</script>
<style lang="scss" scoped>
	@import "~@/assets/styles/mixin.scss";
	@import "~@/assets/styles/variables.scss";
	.videoPanel {
		@include grow;
		min-height: 0;
		padding: 8px;
		background-color: #fff;
		.tab-content {
			height: calc(100% - 40px) ;
			> div {
				height: 100%;
				overflow-y: hidden;
			}
		}
		/deep/.el-tabs__header {
			margin: 0;
		}
	}
  .el-table__body-wrapper.is-scrolling-none{

  }
</style>
